<!--  用户基础信息  -->
<template>
  <a-form
    ref="formRef"
    :model="formData"
    class="form"
    :wrapper-col-props="{ span: 16 }"
  >
    <a-form-item
      field="email"
      label="邮箱"
      :rules="[
        {
          required: true,
          message: '请输入邮箱地址，如xxx{\'@\'}bytedance.com',
        },
      ]"
    >
      <a-input
        v-model="formData.email"
        placeholder="请输入邮箱地址，如xxx{'@'}bytedance.com"
      />
    </a-form-item>
    <a-form-item
      field="nickname"
      label="昵称"
      :rules="[
        {
          required: true,
          message: '请输入您的昵称',
        },
      ]"
    >
      <a-input v-model="formData.nickname" placeholder="请输入您的昵称" />
    </a-form-item>
    <a-form-item
      field="gender"
      label="性别"
      :rules="[
        {
          required: true,
          message: '请选择您的性别',
        },
      ]"
    >
      <a-select v-model="formData.gender" placeholder="请选择您的性别">
        <a-option :value="1">男</a-option>
        <a-option :value="2">女</a-option>
        <a-option :value="3">保密</a-option>
      </a-select>
    </a-form-item>
    <a-form-item field="mobile" label="手机号">
      <a-input v-model="formData.mobile" placeholder="请输入手机号" />
    </a-form-item>
    <a-form-item
      field="intro"
      label="个人简介"
      :rules="[
        {
          maxLength: 200,
          message: '请输入您的个人简介，最多不超过200字。',
        },
      ]"
      row-class="keep-margin"
    >
      <a-textarea
        v-model="formData.intro"
        placeholder="请输入您的个人简介，最多不超过200字。"
      />
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button type="primary" :loading="loading" @click="validate">
          保存
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { BasicInfoModel, updateRows } from '@/api/user-center';
  import { useUserStore } from '@/store';
  import { Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';

  const { loading, setLoading } = useLoading();

  const props = defineProps({
    avatar: String,
  });
  const avatarStr = computed(() => {
    return props.avatar;
  });
  const userStore = useUserStore();
  const formRef = ref<FormInstance>();
  const formData = ref<BasicInfoModel>({
    email: userStore.email,
    nickname: userStore.nickname,
    gender: userStore.gender,
    mobile: userStore.mobile,
    intro: userStore.intro,
    avatar: avatarStr as unknown as string,
  });
  const validate = async () => {
    const res = await formRef.value?.validate();
    if (res) {
      return false;
    }
    setLoading(true);
    //  修改
    await updateRows(formData.value);
    await userStore.info();
    Message.success('操作成功');
    setLoading(false);
    return true;
  };
</script>

<style scoped lang="less">
  .form {
    width: 540px;
  }
</style>
